<template>
	<div class="component-item" :class="active?'selected':''" v-if="moduleData">
		<div class="flex center preview-item-top">
			<div class="del" @click.stop="delModule">
				<Icon type="ios-trash" size='22' style="color: white;" />
			</div>
		</div>
        <div class="component-content">
            <div class="disFlex vertical">
                <div class="disFlex Flex-between Flex-bottom">
	                <div class="component-title">{{moduleData.label_name_cn}}</div>
	                <template v-if="moduleData.more">
	                    <div class="disFlex vertical" v-if="moduleData.more.display=='true'">
	                        <div class="Flex"></div>
	                        <div class="more">查看更多</div>
	                    </div>
	                </template>
	            </div>
                <div class="component-desc">{{moduleData.label_info_summary}}</div>
            </div>
            <div class="disFlex Flex-middle" style="overflow-x: scroll;">
                <div class="img-wrapper disFlex vertical" v-for="item in moduleData.data" :key="item.id">
                    <div class="bgCover img" :style="'background-image: url('+ item.image_path +')'"></div>
					<div class="disFlex vertical Flex Flex-between" >
						<span class="slide-good-title" style="overflow:hidden;text-overflow:ellipsis; white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;">{{item.goods_title}}</span>
						<div class="disFlex Flex-bottom">
							<span class="slide-good-price">￥{{item.style[0].price_publicize}}<span style="font-size:12px;"> /{{item.goods_unit}}</span></span>
							<span class="slide-good-price-origin">￥{{item.style[0].price_market}}</span>
						</div>
					</div>
                </div>
				
            </div>
        </div>
    </div>
</template>

<script>

export default {
  	name: 'SliderModule',		
	props: {
	    moduleData: {
	      type: Object,
	      default: null
	    },
	    active: {
	    	type: Boolean,
	    	default: false
	    }
	},
    data () {
        return {

    	}
    },
    methods: {
    	delModule() {
			this.$emit("delModule",this.moduleData);		
    	}
    },
    created() {
    },
    components: {
	}
 }
</script>

<style scoped>	

@import url("../baseModule.less");

.img-wrapper {
	/* width: 120px;
	height: 85px; */
	width: 120px;
	margin-right: 6px;
	height: 165px;
}
.img-wrapper .img {
	min-width: 120px;
	width: 120px;
	height: 80px;
	background: #f2f2f2;
}
.slide-good-title {
	/* overflow:hidden;
	text-overflow:ellipsis; 
	white-space:normal;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; */
	margin: 10px 0;font-size:14px;color:black;
}
.slide-good-price {
	font-weight: 500;
	color: #F64031;
	font-size: 16px;
}
.slide-good-price-origin {
	color: gray;
	font-size: 12px;
	margin-left: 8px;
}

</style>
